<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="600" style="border:1px solid #ddd;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Drawing parameters
    const centerX = 200;
    const tableY = 200;
    const groundY = 550;
    const rodHalfLength = 150;
    const rodTopY = tableY - rodHalfLength;
    const rodBottomY = tableY + rodHalfLength;

    // Helper function for drawing text
    function drawText(text, x, y, font = '24px Times New Roman', align = 'center', baseline = 'middle') {
        ctx.font = font;
        ctx.textAlign = align;
        ctx.textBaseline = baseline;
        ctx.fillStyle = 'black';
        ctx.fillText(text, x, y);
    }

    // Helper function for drawing a fraction
    function drawFraction(numerator, denominator, x, y, size) {
        ctx.font = `${size}px Times New Roman`;
        ctx.textAlign = 'center';
        const numWidth = ctx.measureText(numerator).width;
        const denWidth = ctx.measureText(denominator).width;
        const barWidth = Math.max(numWidth, denWidth) + 6;

        // Numerator
        ctx.textBaseline = 'bottom';
        ctx.fillText(numerator, x, y - 2);

        // Fraction bar
        ctx.beginPath();
        ctx.moveTo(x - barWidth / 2, y);
        ctx.lineTo(x + barWidth / 2, y);
        ctx.stroke();

        // Denominator
        ctx.textBaseline = 'top';
        ctx.fillText(denominator, x, y + 2);
    }

    // --- Start Drawing ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    // 1. Ground
    ctx.beginPath();
    ctx.moveTo(0, groundY);
    ctx.lineTo(400, groundY);
    ctx.stroke();
    // Hatching for ground
    ctx.lineWidth = 1.5;
    for (let i = 0; i < 410; i += 20) {
        ctx.beginPath();
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - 20, groundY + 20);
        ctx.stroke();
    }
    ctx.lineWidth = 2;

    // 2. Tabletop and Supports
    const tableWidth = 150;
    const holeWidth = 10;
    const supportLeftX = centerX - tableWidth;
    const supportRightX = centerX + tableWidth;

    // Supports
    ctx.beginPath();
    ctx.moveTo(supportLeftX, tableY);
    ctx.lineTo(supportLeftX, groundY);
    ctx.moveTo(supportRightX, tableY);
    ctx.lineTo(supportRightX, groundY);
    ctx.stroke();

    // Tabletop
    ctx.beginPath();
    ctx.moveTo(supportLeftX - 30, tableY);
    ctx.lineTo(centerX - holeWidth / 2, tableY);
    ctx.moveTo(centerX + holeWidth / 2, tableY);
    ctx.lineTo(supportRightX + 30, tableY);
    ctx.stroke();

    // 3. Rod
    ctx.beginPath();
    ctx.moveTo(centerX, rodTopY - 20);
    ctx.lineTo(centerX, rodBottomY);
    ctx.stroke();

    // 4. Bug (小虫)
    const bugY = rodBottomY;
    ctx.beginPath();
    ctx.arc(centerX, bugY, 5, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 5. Candle
    const candleWidth = 34;
    const candleHeight = 50;
    const candleX = centerX;
    const candleBaseY = groundY;
    const candleTopY = candleBaseY - candleHeight;

    ctx.beginPath();
    ctx.rect(candleX - candleWidth / 2, candleTopY, candleWidth, candleHeight);
    ctx.stroke();

    // Candle stripes
    ctx.save();
    ctx.beginPath();
    ctx.rect(candleX - candleWidth / 2, candleTopY, candleWidth, candleHeight);
    ctx.clip();
    ctx.lineWidth = 2.5;
    for (let i = -candleHeight; i < candleWidth; i += 15) {
        ctx.beginPath();
        ctx.moveTo(candleX - candleWidth / 2 + i, candleTopY);
        ctx.lineTo(candleX - candleWidth / 2 + i + candleHeight, candleTopY + candleHeight);
        ctx.stroke();
    }
    ctx.restore();

    // Candle flame
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(candleX, candleTopY);
    ctx.quadraticCurveTo(candleX - 12, candleTopY - 15, candleX + 2, candleTopY - 22);
    ctx.stroke();


    // 6. Labels
    // Mass M
    drawText('M', centerX - 70, tableY - 70, 'italic 32px Times New Roman');

    // Mass m
    drawText('m', centerX - 30, bugY, 'italic 24px Times New Roman', 'left');

    // Length labels L/2
    const labelLineX = centerX + 60;
    ctx.beginPath();
    ctx.moveTo(labelLineX, rodTopY);
    ctx.lineTo(labelLineX, rodBottomY);
    ctx.moveTo(labelLineX - 5, tableY);
    ctx.lineTo(labelLineX + 5, tableY);
    ctx.stroke();

    // Top L/2
    drawFraction('L', '2', labelLineX + 25, (rodTopY + tableY) / 2, 28);

    // Bottom L/2
    drawFraction('L', '2', labelLineX + 25, (tableY + rodBottomY) / 2, 28);

</script>
</body>
</html>